import { useState } from 'react'
import {
  StyleSheet,
  View,
  Text,
  Pressable,
  Animated,
  TouchableHighlight,
  StatusBar,
  Image,
} from 'react-native'
import { useCardAnimation } from '@react-navigation/stack'
import useGetStatusBar from '../../utils/useGetStatusBar'
import { CategoryData } from '../../assets/data/data'
import { msgProxy } from './category'

export default function CateGoryDrawer({ navigation, route }: any) {
  const { current } = useCardAnimation()
  const [barHeight] = useGetStatusBar()
  const [currentCId, setCurrentId] = useState(route.params.categoryId || 1)
  const cateData = CategoryData
  function onConfirm() {
    msgProxy.id = currentCId
    navigation.goBack()
  }
  return (
    <View style={styles.container}>
      <StatusBar barStyle="dark-content" />
      <Pressable
        style={[
          StyleSheet.absoluteFill,
          { backgroundColor: 'rgba(0, 0, 0, 0.5)' },
        ]}
        onPress={navigation.goBack}
      />
      <Animated.View
        style={StyleSheet.compose(styles.cateList, {
          paddingTop: barHeight,
          transform: [
            {
              translateY: current.progress.interpolate({
                inputRange: [0, 1],
                outputRange: [-100, 0],
                extrapolate: 'clamp',
              }),
            },
          ],
        })}
      >
        <View style={styles.titleWrap}>
          <Text style={styles.title}>全部分类</Text>
        </View>
        {cateData.map(item => (
          <Pressable
            onPress={() => setCurrentId(item.id)}
            key={item.id}
            style={styles.cateView}
          >
            <View
              style={StyleSheet.compose(
                styles.topCateIconWrap,
                item.id === currentCId ? styles.topCateIconWrapActive : {},
              )}
            >
              <Image style={styles.icon} source={item.icon} />
            </View>
            <View
              style={StyleSheet.compose(
                styles.topCateTxtWrap,
                item.id === currentCId ? styles.topCateTxtWrapActive : {},
              )}
            >
              <Text
                style={StyleSheet.compose(styles.txt, {
                  color: item.id !== currentCId ? '#333' : '#fff',
                })}
              >
                {item.txt}
              </Text>
            </View>
          </Pressable>
        ))}
        <TouchableHighlight
          underlayColor="#eef8fe"
          style={styles.confirmWrap}
          onPress={onConfirm}
        >
          <Text style={styles.confirm}>确定</Text>
        </TouchableHighlight>
      </Animated.View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#ffffffff',
  },
  titleWrap: {
    height: 48,
    display: 'flex',
    justifyContent: 'center',
    width: '100%',
    paddingHorizontal: 12,
  },
  title: {
    fontSize: 16,
    color: '#333',
    fontWeight: 'bold',
  },
  cateList: {
    width: '100%',
    borderBottomLeftRadius: 8,
    borderBottomRightRadius: 8,
    backgroundColor: '#fff',
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  cateView: {
    display: 'flex',
    alignItems: 'center',
    width: '20%',
    marginTop: 8,
    marginBottom: 8,
  },
  topCateIconWrap: {
    padding: 8,
    borderRadius: 18,
    borderWidth: 2,
    borderColor: '#fff',
  },
  topCateIconWrapActive: {
    borderColor: '#fed66f',
    backgroundColor: '#eef8fe',
  },
  topCateTxtWrap: {
    borderRadius: 10,
    marginTop: 6,
    width: 60,
    paddingVertical: 1,
  },
  topCateTxtWrapActive: {
    backgroundColor: '#fed66f',
  },
  icon: {
    width: 28,
    height: 28,
  },
  txt: {
    fontSize: 14,
    textAlign: 'center',
    color: '#333',
  },
  confirm: {
    color: '#333',
    fontSize: 14,
  },
  confirmWrap: {
    width: '100%',
    height: 48,
    marginTop: 12,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 8,
  },
})
